{% extends "base.html" %}

{% block title %}Account Detail{% endblock %}

{% block body %}
    {# 检查是否登录 #}
    {% if user_info %}
        {% with a=account %}
            <!-- Add Extra Info Modal -->
            <div class="modal" id="modal-add-extra" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">{{ a.name }} - Add Extra Info</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <form method="post">
                            {% csrf_token %}
                            <div class="modal-body">
                                {% csrf_token %}
                                <input type="hidden" name="id" value="{{ a.id }}">
                                <input type="hidden" name="action" value="add_extra">
                                <div class="form-group">
                                    <label for="modal-add-name" class="col-form-label">Name:</label>
                                    <input id="modal-add-encrypted-name" type="hidden" name="name" value="">
                                    <input id="modal-add-name" type="text" class="form-control">
                                </div>
                                <div class="form-group">
                                    <label for="modal-add-value" class="col-form-label">Value:</label>
                                    <input id="modal-add-encrypted-value" type="hidden" name="value" value="">
                                    <input id="modal-add-value" type="text" class="form-control">
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                                <button id="modal-add-submit" type="submit" class="btn btn-primary">Save</button>
                            </div>
                        </form>
                    </div>
                </div>
                <script>
                    $("#modal-add-submit").click(function () {
                        $("#modal-add-encrypted-name").val($("#modal-add-name").val());
                        $("#modal-add-encrypted-value").val(encrypt_data($("#modal-add-value").val()));
                    });
                </script>
            </div>

            <!-- Modal Confirm Delete -->
            {% for ext in a.extra_info.all %}
                <div class="modal" id="modal-delete-extra-{{ ext.pk }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">{{ a.name }} - {{ ext.name }}</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <form method="post" action="/site/account-extra-delete">
                                {% csrf_token %}
                                <input type="hidden" name="id" value="{{ a.id }}">
                                <input type="hidden" name="ext_pk" value="{{ ext.pk }}">
                                <input type="hidden" name="redirect" value="/site/account-detail?id={{ a.id }}">
                                <div class="modal-body">
                                    Are you sure to delete the account "{{ ext.name }}" ?
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
                                    <button type="submit" class="btn btn-primary">Confirm</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            {% endfor %}

            <!-- Edit Extra Info Modal -->
            {% for ext in a.extra_info.all %}
                <div class="modal" id="modal-edit-extra-{{ ext.pk }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">{{ a.name }} - Add Extra Info</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <form method="post">
                                {% csrf_token %}
                                <div class="modal-body">
                                    <input type="hidden" name="id" value="{{ a.id }}">
                                    <input type="hidden" name="ext_pk" value="{{ ext.pk }}">
                                    <input type="hidden" name="action" value="update_extra">
                                    <div class="form-group">
                                        <label for="text-name-{{ ext.pk }}" class="col-form-label">Name:</label>
                                        <input id="modal-edit-encrypted-name-{{ ext.pk }}" type="hidden" name="name">
                                        <input id="modal-edit-name-{{ ext.pk }}" type="text" class="form-control" value="{{ ext.name }}">
                                    </div>
                                    <div class="form-group">
                                        <label for="text-value-{{ ext.pk }}" class="col-form-label">Value:</label>
                                        <input id="modal-edit-encrypted-value-{{ ext.pk }}" type="hidden" name="value">
                                        <input id="modal-edit-value-{{ ext.pk }}" type="text" class="form-control" value="{{ ext.value }}">
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                                    <button id="modal-edit-subtmit-{{ ext.pk }}" type="submit" class="btn btn-primary">Save</button>
                                </div>
                                <script>
                                    // 解锁数据
                                    $(document).ready(function () {
                                        if (isLogin()) {
                                            try {
                                                $("#modal-edit-value-{{ ext.pk }}").val(decrypt_data("{{ ext.value }}"));
                                            } catch (e) {
                                                console.error(e.toString());
                                                $("#modal-edit-name-{{ ext.pk }}").attr("readonly", "readonly");
                                                $("#modal-edit-value-{{ ext.pk }}").val("This content is locked.");
                                                $("#modal-edit-value-{{ ext.pk }}").attr("readonly", "readonly");
                                                $("#modal-edit-subtmit-{{ ext.pk }}").remove();
                                            }
                                        } else {
                                            $("#modal-edit-name-{{ ext.pk }}").attr("readonly", "readonly");
                                            $("#modal-edit-value-{{ ext.pk }}").val("This content is locked.");
                                            $("#modal-edit-value-{{ ext.pk }}").attr("readonly", "readonly");
                                            $("#modal-edit-subtmit-{{ ext.pk }}").remove();
                                        }
                                    });

                                    $("#modal-edit-subtmit-{{ ext.pk }}").click(function () {
                                        $("#modal-edit-encrypted-name-{{ ext.pk }}").val($("#modal-edit-name-{{ ext.pk }}").val());
                                        $("#modal-edit-encrypted-value-{{ ext.pk }}").val(encrypt_data($("#modal-edit-value-{{ ext.pk }}").val()));
                                    });
                                </script>
                            </form>
                        </div>
                    </div>
                </div>
            {% endfor %}

            <div class=" row">
                <div id="accordion" class="col-8">
                    <!-- Basic Account Info -->
                    <a id="basic"></a>
                    <div class="list-group">
                        <li class="list-group-item d-flex justify-content-between align-items-center bg-grey text-light">
                            Extra Info
                            <a class="btn-link text-light" href="#" data-toggle="collapse"
                               data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                                <i class="material-icons">menu</i>
                            </a>
                        </li>
                        <div class="collapse show" id="collapseOne" aria-labelledby="headingOne" data-parent="#accordion">
                            <form class="list-group-item" method="post">
                                {% csrf_token %}
                                <div class="modal-body">
                                    {% csrf_token %}
                                    <input type="hidden" name="id" value="{{ a.id }}">
                                    <input type="hidden" name="action" value="update_account">
                                    <div class="form-group">
                                        <label for="select-platform-{{ a.id }}" class="col-form-label">Platform:</label>
                                        <div class="row">
                                            <div class="col">
                                                <select id="select-platform-{{ a.id }}" class="form-control" name="platform">
                                                    {% for platform in user_info.account_platforms.all %}
                                                        <option value="{{ platform.name }}">{{ platform.name }}</option>
                                                    {% endfor %}
                                                </select>
                                            </div>
                                            <div class="col-2">
                                                <a href="/site/account-platform" class="btn btn-outline-info">Manage</a>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="text-name-{{ a.id }}" class="col-form-label">Account Name:</label>
                                        <input id="text-name-{{ a.id }}" type="text" class="form-control" name="name" value="{{ a.name }}">
                                    </div>
                                    <div class="form-group">
                                        <label for="text-account-{{ a.id }}" class="col-form-label">Account:</label>
                                        <input id="text-encrypted-account-{{ a.id }}" type="hidden" name="account">
                                        <input id="text-account-{{ a.id }}" type="text" class="form-control" value="{{ a.account }}">
                                    </div>
                                    <div class="form-group">
                                        <label for="text-password-{{ a.id }}" class="col-form-label">Password:</label>
                                        <input id="text-encrypted-password-{{ a.id }}" type="hidden" name="password">
                                        <input id="text-password-{{ a.id }}" type="text" class="form-control" value="{{ a.password }}">
                                    </div>
                                    <div class="form-group">
                                        <label for="text-notes-{{ a.id }}" class="col-form-label">Notes:</label>
                                        <input id="text-encrypted-notes-{{ a.id }}" type="hidden" name="notes">
                                        <textarea id="text-notes-{{ a.id }}" type="text" class="form-control">{{ a.notes }}</textarea>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button id="btn-update-{{ a.id }}" type="submit" class="btn btn-outline-info">Update</button>
                                </div>
                            </form>
                        </div>
                        <script>
                            $("#select-platform-{{ a.id }}").val('{{ a.platform }}');
                            $(document).ready(function () {
                                // 如果已经解锁，则解密数据
                                if (isLogin()) {
                                    // 检测解锁状态
                                    try {
                                        $("#text-account-{{ a.id }}").val(decrypt_data("{{ a.account }}"));
                                        $("#text-password-{{ a.id }}").val(decrypt_data("{{ a.password }}"));
                                        $("#text-notes-{{ a.id }}").val(decrypt_data("{{ a.notes }}"));
                                    }
                                    catch (e) {
                                        console.log(e.toString());
                                        $("#select-platform-{{ a.id }}").attr("readonly", "readonly");
                                        $("#text-name-{{ a.id }}").attr("readonly", "readonly");
                                        $("#text-account-{{ a.id }}").val("This content is locked.");
                                        $("#text-account-{{ a.id }}").attr("readonly", "readonly");
                                        $("#text-password-{{ a.id }}").val("This content is locked.");
                                        $("#text-password-{{ a.id }}").attr("readonly", "readonly");
                                        $("#text-notes-{{ a.id }}").val("This content is locked.");
                                        $("#text-notes-{{ a.id }}").attr("readonly", "readonly");
                                        $("#btn-update-{{ a.id }}").remove();
                                        del_pwd();
                                    }
                                }
                                else {
                                    $("#select-platform-{{ a.id }}").attr("readonly", "readonly");
                                    $("#text-name-{{ a.id }}").attr("readonly", "readonly");
                                    $("#text-account-{{ a.id }}").val("This content is locked.");
                                    $("#text-account-{{ a.id }}").attr("readonly", "readonly");
                                    $("#text-password-{{ a.id }}").val("This content is locked.");
                                    $("#text-password-{{ a.id }}").attr("readonly", "readonly");
                                    $("#text-notes-{{ a.id }}").val("This content is locked.");
                                    $("#text-notes-{{ a.id }}").attr("readonly", "readonly");
                                    $("#btn-update-{{ a.id }}").remove();
                                }
                            });

                            $("#btn-update-{{ a.id }}").click(function () {
                                $("#text-encrypted-account-{{ a.id }}").val(encrypt_data($("#text-account-{{ a.id }}").val()));
                                $("#text-encrypted-password-{{ a.id }}").val(encrypt_data($("#text-password-{{ a.id }}").val()));
                                $("#text-encrypted-notes-{{ a.id }}").val(encrypt_data($("#text-notes-{{ a.id }}").val()));
                            });
                        </script>
                    </div>

                    <br>

                    <!-- Extra Info -->
                    <a id="extra"></a>
                    <ul class="list-group">
                        <li class="list-group-item d-flex justify-content-between align-items-center bg-success text-light">
                            Extra Info
                            <a class="btn-link text-light" data-toggle="modal" data-target="#modal-add-extra" href="#">
                                <i class="material-icons">add</i>
                            </a>
                        </li>
                        {% for ext in a.extra_info.all %}
                            <li class="list-group-item flex-column align-items-start">
                                <div class="d-flex w-100 justify-content-between">
                                    <h5 id="ext-name-{{ ext.id }}" class="mb-1">{{ ext.name }}</h5>
                                    {# <small>{{ a.create_time }}</small> #}
                                    <div>
                                        <a class="btn-link text-muted" data-toggle="modal" data-target="#modal-edit-extra-{{ ext.pk }}" href="#">
                                            <i class="material-icons">edit</i>
                                        </a>
                                        <a class="btn-link text-danger" data-toggle="modal" data-target="#modal-delete-extra-{{ ext.pk }}" href="#">
                                            <i class="material-icons">delete</i>
                                        </a>
                                    </div>
                                </div>
                                <p id="ext-value-{{ ext.id }}" class="mb-1 text-muted">{{ ext.value }}</p>
                            </li>
                            <script>
                                $(document).ready(function () {
                                    // 如果已经解锁，则解密数据
                                    if (isLogin()) {
                                        // 检测解锁状态
                                        try {
                                            $("#ext-value-{{ ext.id }}").text(decrypt_data("{{ ext.value }}"));
                                        }
                                        catch (e) {
                                            console.log(e.toString());
                                            $("#ext-value-{{ ext.id }}").html("<b class=\"text-danger\">The key your provide is wrong, unlock failed, please refresh.</b>");
                                            del_pwd();
                                        }
                                    }
                                    else {
                                        $("#ext-value-{{ ext.id }}").html("<b class=\"text-warning\">This content is locked. Please enter your key to unlock.</b>");
                                    }
                                })
                            </script>
                        {% empty %}
                            <li class="list-group-item flex-column align-items-start">
                                <div class="d-flex w-100 justify-content-between">
                                    <h5 class="mb-1">Empty</h5>
                                    <small id="small-empty-poem" class="text-muted"></small>
                                </div>
                                <p class="mb-1">The account {{ a.name }} has no any extra information.</p>
                            </li>
                            <script>
                                $(document).ready(function () {
                                    $.get('/api/utils/poem', function (data, status) {
                                        $('#small-empty-poem').text(data)
                                    });
                                })
                            </script>
                        {% endfor %}
                    </ul>

                    <br>

                    <!-- More for fun -->
                    <a id="fun"></a>
                    <ul class="list-group">
                        <li class="list-group-item d-flex justify-content-between align-items-center bg-jumbotron text-light">
                            More for fun
                        </li>
                        {% for index in hitokoto_range %}
                            <li class="list-group-item flex-column align-items-start">
                                <div class="d-flex w-100 justify-content-between">
                                    <div id="hitokoto-from-{{ index }}" class="mb-1">{% lorem 3 w %}</div>
                                    <small id="hitokoto-creator-{{ index }}" class="text-muted">{% lorem 4 w %}</small>
                                </div>
                                <p id="hitokoto-content-{{ index }}" class="mb-1">{% lorem 10 w %}</p>
                            </li>
                            <script>
                                $(document).ready(function () {
                                    $.get('/api/utils/hitokoto', function (data, status) {
                                        $("#hitokoto-from-{{ index }}").text(data.data.from_where);
                                        $('#hitokoto-creator-{{ index }}').text(data.data.creator);
                                        $('#hitokoto-content-{{ index }}').text(data.data.hitokoto);
                                    })
                                })
                            </script>
                        {% endfor %}
                    </ul>
                </div>


                <div class="col-4">
                    <ul class="list-unstyled border-white">
                        <a class="btn list-group-item list-group-item-action" href="#basic">Basic account</a>
                        <a class="btn list-group-item list-group-item-action" href="#extra">Extra info</a>
                        <a class="btn list-group-item list-group-item-action" href="#fun">More for fun</a>
                    </ul>

                    <ul class="list-unstyled">
                        <li class="list-group-item d-flex justify-content-between align-items-center bg-secondary text-light">Other Accounts</li>
                        {% for item in user_info.accounts.all %}
                            {% if item.id == a.id %}
                                <a class="btn list-group-item list-group-item-action active" href="/site/account-detail?id={{ item.id }}">{{ item.name }}</a>
                            {% else %}
                                <a class="btn list-group-item list-group-item-action" href="/site/account-detail?id={{ item.id }}">{{ item.name }}</a>
                            {% endif %}
                        {% endfor %}
                    </ul>
                </div>
            </div>
        {% endwith %}
    {% else %}
        {% include "component/jump-to-sign-in.html" %}
    {% endif %}

    <!-- 加载数据安全组件 -->
    {% include "component/data-secure.html" %}
{% endblock %}